<template>
	<cl-crud ref="Crud">
		<cl-row>
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />
			<!-- 筛选状态 -->
			<cl-filter label="状态">
				<cl-select prop="status" :options="options.status" />
			</cl-filter>
			<cl-flex1 />
			<!-- 关键字搜索 -->
			<cl-search-key placeholder="搜索主播" />
		</cl-row>

		<cl-row>
			<!-- 数据表格 -->
			<cl-table ref="Table">
				<template #slot-btn="{ scope }">
					<el-button text bg @click="copyLink(scope.row)">复制链接</el-button>
				</template>
			</cl-table>
		</cl-row>

		<cl-row>
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</cl-row>
		<!-- 新增、编辑 -->
		<cl-upsert ref="Upsert" />
	</cl-crud>
</template>

<script lang="ts" name="anchor-info" setup>
import { useCrud, useTable, useUpsert } from "@cool-vue/crud";
import { useCool } from "/@/cool";
import { onMounted, reactive, ref } from "vue";
import { useDict } from "/$/dict";
import { useClipboard } from "@vueuse/core";
import { ElMessage, ElMessageBox } from "element-plus";

const { dict } = useDict();
const { copy } = useClipboard();

const { service } = useCool();

// 选项
const options = reactive({
	status: [
		{ label: "禁用", value: 0, type: "danger" },
		{ label: "启用", value: 1, type: "success" }
	]
});

let anchorOptions = ref<any>([]);

// cl-upsert
const Upsert = useUpsert({
	dialog: {
		width: "40%"
	},
	items: [
		{
			label: "客服",
			prop: "name",
			component: {
				name: "el-input",
				props: { clearable: true }
			},
			col: {
				span: 12
			},
			required: true
		},
		{
			label: "账号",
			prop: "account",
			component: {
				name: "el-input",
				props: { clearable: true }
			},
			col: {
				span: 12
			}
		},
		{
			label: "密码",
			prop: "password",
			component: {
				name: "el-input",
				props: { clearable: true, type: "password" }
			},
			col: {
				span: 12
			}
		},
		{
			label: "状态",
			prop: "status",
			component: { name: "el-radio-group", options: options.status },
			value: 1,
			col: {
				span: 12
			},
			required: true
		},
		{
			label: "备注",
			prop: "remark",
			component: {
				name: "el-input",
				props: { clearable: true }
			},
			col: {
				span: 12
			}
		}
	]
});

// cl-table
const Table = useTable({
	columns: [
		{ type: "selection" },
		{ label: "客服", prop: "name", minWidth: 140 },
		{ label: "账号", prop: "account", minWidth: 140 },
		{ label: "备注", prop: "remark", minWidth: 140 },
		{
			label: "创建时间",
			prop: "createTime",
			minWidth: 170,
			sortable: "desc",
			component: { name: "cl-date-text" }
		},
		{
			label: "更新时间",
			prop: "updateTime",
			minWidth: 170,
			sortable: "custom",
			component: { name: "cl-date-text" }
		},
		{ type: "op", width: 320, buttons: ["edit", "delete", "slot-btn"] }
	]
});

// 复制链接

const copyLink = (row) => {
	ElMessageBox.prompt("请输入主播名称", "Tip", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		inputPattern: /\S/,
		inputErrorMessage: "请输入主播名称"
	})
		.then(({ value }) => {
			if (!value) {
				ElMessage.error("请输入主播名称");
				return;
			}
			copy("http://chat.dearweb.cn/chat?account=" + row.imAccount + "&name=" + value);
			ElMessage.success("复制成功");
		})
		.catch(() => {});
};

let category = ref<any>([]);
// cl-crud
const Crud = useCrud(
	{
		service: service.customer_list.info
	},

	async (app) => {
		app.refresh();
	}
);

// 刷新
function refresh(params?: any) {
	Crud.value?.refresh(params);
}

onMounted(() => {});
</script>
